<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../style.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../print.css" type="text/css" media="print">
<meta content="ImageMap,flexlib.controls.ImageMap,showToolTips,toolTipField,map,createChildren,updateDisplayList" name="keywords">
<title>flexlib.controls.ImageMap</title>
</head>
<body>
<script type="text/javascript" language="javascript" src="../../asdoc.js"></script><script type="text/javascript" language="javascript" src="../../cookies.js"></script><script type="text/javascript" language="javascript">
<!--
				asdocTitle = 'ImageMap - flexlib';
				var baseRef = '../../';
				window.onload = configPage;
			--></script>
<table style="display:none" id="titleTable" cellspacing="0" cellpadding="0" class="titleTable">
<tr>
<td align="left" class="titleTableTitle">API Documentation</td><td align="right" class="titleTableTopNav"><a onclick="loadClassListFrame('../../all-classes.html')" href="../../package-summary.html">All&nbsp;Packages</a>&nbsp;|&nbsp;<a onclick="loadClassListFrame('../../all-classes.html')" href="../../class-summary.html">All&nbsp;Classes</a>&nbsp;|&nbsp;<a onclick="loadClassListFrame('../../index-list.html')" href="../../all-index-A.html">Index</a>&nbsp;|&nbsp;<a href="../../index.html?flexlib/controls/ImageMap.html&amp;flexlib/controls/class-list.html" id="framesLink1">Frames</a><a onclick="parent.location=document.location" href="" style="display:none" id="noFramesLink1">No&nbsp;Frames</a></td><td rowspan="3" align="right" class="titleTableLogo"><img alt="Adobe Logo" title="Adobe Logo" class="logoImage" src="../../images/logo.jpg"></td>
</tr>
<tr class="titleTableRow2">
<td align="left" id="subTitle" class="titleTableSubTitle">Class&nbsp;ImageMap</td><td align="right" id="subNav" class="titleTableSubNav"><a href="#propertySummary">Properties</a>&nbsp;| <a href="#methodSummary">Methods</a>&nbsp;| <a href="#eventSummary">Events</a>&nbsp;| <a href="#styleSummary">Styles</a></td>
</tr>
<tr class="titleTableRow3">
<td colspan="2">&nbsp;</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
<!--
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("Class ImageMap"); titleBar_setSubNav(false,true,true,false,true,false,true,false,false,false,false,false,false,false);}
--></script>
<div class="MainContent">
<table cellspacing="0" cellpadding="0" class="classHeaderTable">
<tr>
<td class="classHeaderTableLabel">Package</td><td><a onclick="javascript:loadClassListFrame('class-list.html')" href="package-detail.html">flexlib.controls</a></td>
</tr>
<tr>
<td class="classHeaderTableLabel">Class</td><td class="classSignature">public class ImageMap</td>
</tr>
<tr>
<td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">ImageMap <img class="inheritArrow" alt="Inheritance" title="Inheritance" src="../../images/inherit-arrow.gif"> mx.controls.Image</td>
</tr>
</table>
<p></p>
  The <code>ImageMap</code> control is an implementation of a client-side image map component, like it is supported in HTML.
  <p><code>ImageMap</code> is an extension of the Image class, so you can specify the <code>source</code> attribute
  just like you would for a standard <code>Image</code> component. The <code>map</code> property is used to define the actual
  image map and all the <code>area</code> items that make up the map. The <code>map</code> property can be defined
  either in MXML or by setting it with Actionscript.
  </p>
  
  <p>The intent is for you to be able to generate your image map in whatever program you use to create image maps,
  and be able to cut and paste it into your MXML component with minimal changes.
  </p>
  
  <p>Example MXML usage:</p>
  
  <pre>
  &lt;ImageMap xmlns="flexlib.controls.
    source="usa.jpg"  
    showToolTips="true" 
    shapeClick="navigateToURL(new URLRequest(event.href), event.linkTarget)" 
    &gt;
    
    &lt;map&gt;
     &lt;area alt="WA" shape="POLY" coords="85,11,133,11,134,42,114,42,100,47,96,45,91,48,83,40,76,40,75,29,70,23,71,18,82,20,87,18" href="http://en.wikipedia.org/wiki/Washington" target="_blank"/&gt;
     &lt;area alt="OR" shape="POLY" coords="76,40,83,40,90,48,96,45,101,47,115,43,134,43,138,46,133,57,134,84,72,84,71,71,76,56" href="http://en.wikipedia.org/wiki/Oregon" target="_blank"/&gt;   
    &lt;/map&gt;
  
  &lt;/ImageMap&gt;
  </pre>
  
  <p></p>
<p>
<span class="classHeaderTableLabel">See also</span>
</p>
<div class="seeAlso">
<a href="http://www.w3.org/TR/html4/struct/objects.html#client-side-maps" target="mm_external">http://www.w3.org/TR/html4/struct/objects.html#client-side-maps</a>
</div>
<br>
<hr>
</div>
<a name="propertySummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Public Properties</div>
<table id="summaryTableProperty" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#map">map</a> : Array<div class="summaryTableDescription">
   The <code>&lt;map /&gt;</code> HTML block that is normally used for the image map in an HTML file.</div>
</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#showToolTips">showToolTips</a> : Boolean = false<div class="summaryTableDescription">
   Indicates whether tool tips should be shown for each area.</div>
</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#toolTipField">toolTipField</a> : String = "alt"<div class="summaryTableDescription">
   Field of the <code>&lt;area /&gt;</code> item that will be used for the tooltip.</div>
</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
</table>
</div>
<a name="methodSummary"></a><a name="protectedMethodSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Protected Methods</div>
<table id="summaryTableProtectedMethod" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#createChildren()">createChildren</a>():void</div>
<div class="summaryTableDescription"></div>
</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#updateDisplayList()">updateDisplayList</a>(unscaledWidth:Number, unscaledHeight:Number):void</div>
<div class="summaryTableDescription"></div>
</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
</table>
</div>
<a name="eventSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Events</div>
<table id="summaryTableEvent" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Event</th><th>Summary</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#event:shapeClick">shapeClick</a>
</div>
</td><td class="summaryTableDescription summaryTableCol">
  Fired when an area is clicked.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#event:shapeDoubleClick">shapeDoubleClick</a>
</div>
</td><td class="summaryTableDescription summaryTableCol">
  Fired when an area is double clicked.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#event:shapeDown">shapeDown</a>
</div>
</td><td class="summaryTableDescription summaryTableCol">
  Fired when the mouse is pressed down on an area.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#event:shapeOut">shapeOut</a>
</div>
</td><td class="summaryTableDescription summaryTableCol">
  Fired when the mouse moves out of an area.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#event:shapeOver">shapeOver</a>
</div>
</td><td class="summaryTableDescription summaryTableCol">
  Fired when the mouse moves over an area.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#event:shapeUp">shapeUp</a>
</div>
</td><td class="summaryTableDescription summaryTableCol">
  Fired when the mouse is released on an area.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
</table>
</div>
<a name="styleSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Styles</div>
<table id="summaryTableStyle" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Style</th><th>Description</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fillAlpha"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fillAlpha</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">Format: </span>Length &nbsp; <span class="label">CSS Inheritance: </span>no<br>
   Alpha transparency of the fill of each area. Default is 0 so the areas are invisible.
   
    The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fillColor"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fillColor</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>no<br>
   Fill color of each area.
   
    The default value is <code>0xff0000</code>.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:outlineAlpha"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">outlineAlpha</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">Format: </span>Length &nbsp; <span class="label">CSS Inheritance: </span>no<br>
   Alpha transparency of the outline of each area. Default is 0 so the outlines are invisible.
   
    The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:outlineColor"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">outlineColor</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>no<br>
   Color of the outline of each area.
   
    The default value is <code>0xff0000</code>.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:outlineThickness"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">outlineThickness</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">Format: </span>Length &nbsp; <span class="label">CSS Inheritance: </span>no<br>
   Thickness of the outline of each area.
   
    The default value is <code>1</code>.</td><td class="summaryTableOwnerCol">ImageMap</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
<!--
showHideInherited();
--></script>
<div class="MainContent">
<a name="propertyDetail"></a>
<div class="detailSectionHeader">Property detail</div>
<a name="map"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">map</td><td class="detailHeaderType">property</td>
</tr>
</table>
<div class="detailBody">
<code>map:Array</code>&nbsp;&nbsp;[read-write]<p>
   The <code>&lt;map /&gt;</code> HTML block that is normally used for the image map in an HTML file.
   This should be wrapped as an XMLList and can either be cuopy/pasted straight into the MXML
   file, or set via Actionscript. 
   </p><span class="label">Implementation</span>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function get map():Array</code>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function set map(value:Array):void</code>
<br>
</div>
<a name="showToolTips"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">showToolTips</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>public var showToolTips:Boolean = false</code><p>
   Indicates whether tool tips should be shown for each area.
   
   </p><p>The default value is <code>false</code>.</p>
</div>
<a name="toolTipField"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">toolTipField</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>public var toolTipField:String = "alt"</code><p>
   Field of the <code>&lt;area /&gt;</code> item that will be used for the tooltip.
   </p><p>The default value is <code>"alt"</code>.</p>
</div>
<a name="methodDetail"></a>
<div class="detailSectionHeader">Method detail</div>
<a name="createChildren()"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">createChildren</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td>
</tr>
</table>
<div class="detailBody">
<code>protected override function createChildren():void</code>
</div>
<a name="updateDisplayList()"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">updateDisplayList</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">method</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void</code><span class="label">Parameters</span>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20px"></td><td><code><span class="label">unscaledWidth</span>:Number</code></td>
</tr>
<tr>
<td class="paramSpacer">&nbsp;</td>
</tr>
<tr>
<td width="20px"></td><td><code><span class="label">unscaledHeight</span>:Number</code></td>
</tr>
</table>
</div>
<div class="detailSectionHeader">Event detail</div>
<a name="event:shapeClick"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">shapeClick</td><td class="detailHeaderType">event&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<span class="label">Event object type: </span><a href="../events/ImageMapEvent.html"><code>flexlib.events.ImageMapEvent</code></a>
<br>
<p></p><p>
  Fired when an area is clicked.
  
  </p></div>
<a name="event:shapeDoubleClick"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">shapeDoubleClick</td><td class="detailHeaderType">event&nbsp;</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<span class="label">Event object type: </span><a href="../events/ImageMapEvent.html"><code>flexlib.events.ImageMapEvent</code></a>
<br>
<p></p><p>
  Fired when an area is double clicked.
  
  </p></div>
<a name="event:shapeDown"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">shapeDown</td><td class="detailHeaderType">event&nbsp;</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<span class="label">Event object type: </span><a href="../events/ImageMapEvent.html"><code>flexlib.events.ImageMapEvent</code></a>
<br>
<p></p><p>
  Fired when the mouse is pressed down on an area.
  
  </p></div>
<a name="event:shapeOut"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">shapeOut</td><td class="detailHeaderType">event&nbsp;</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<span class="label">Event object type: </span><a href="../events/ImageMapEvent.html"><code>flexlib.events.ImageMapEvent</code></a>
<br>
<p></p><p>
  Fired when the mouse moves out of an area.
  
  </p></div>
<a name="event:shapeOver"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">shapeOver</td><td class="detailHeaderType">event&nbsp;</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<span class="label">Event object type: </span><a href="../events/ImageMapEvent.html"><code>flexlib.events.ImageMapEvent</code></a>
<br>
<p></p><p>
  Fired when the mouse moves over an area.
  
  </p></div>
<a name="event:shapeUp"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">shapeUp</td><td class="detailHeaderType">event&nbsp;</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<span class="label">Event object type: </span><a href="../events/ImageMapEvent.html"><code>flexlib.events.ImageMapEvent</code></a>
<br>
<p></p><p>
  Fired when the mouse is released on an area.
  
  </p></div>
<br>
<br>
<hr>
<br>
<p></p>
<center class="copyright"> 
</center>
</div>
</body>
</html>
<!-- -->
